<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据字典</title>
		<link rel="stylesheet" href="/static/layui/css/layui.css" />
<link rel="stylesheet" href="/static/ui/css/ui.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">字典名称</label>
								<div class="layui-input-inline">
									<input type="text" name="typeName" placeholder="" class="layui-input">
								</div>
								<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dict-type-query">
									<i class="layui-icon layui-icon-search"></i>
									查询
								</button>
								<button type="reset" class="pear-btn pear-btn-md">
									<i class="layui-icon layui-icon-refresh"></i>
									重置
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<table id="dict-type-table" lay-filter="dict-type-table"></table>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<img src="/static/images/empty.svg" class="empty" style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184" height="152">
						<table id="dict-data-table" lay-filter="dict-data-table"></table>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script type="text/html" id="dict-type-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
	        <i class="layui-icon layui-icon-add-1"></i>
	        新增
	    </button>
	    <!--button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
	        <i class="layui-icon layui-icon-delete"></i>
	        删除
	    </button-->
	</script>

	<script type="text/html" id="dict-type-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
	        <i class="layui-icon layui-icon-edit"></i>
	    </button>
	    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
	        <i class="layui-icon layui-icon-transfer"></i>
	    </button>
	    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
	        <i class="layui-icon layui-icon-delete"></i>
	    </button>
	</script>

	<script type="text/html" id="dict-type-enable">
		<input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-type-enable" {{d.enable== '0' ? 'checked' : '' }}>
	</script>

	<script type="text/html" id="dict-data-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
	        <i class="layui-icon layui-icon-add-1"></i>
	        新增
	    </button>
		<span id="objname"></span>
	    <!--button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
	        <i class="layui-icon layui-icon-delete"></i>
	        删除
	    </button-->
	</script>

	<script type="text/html" id="dict-data-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
	    </button>
	    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
	    </button>
	</script>

	<script type="text/html" id="dict-data-enable">
		<input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-data-enable" {{d.enable== '0' ? 'checked' : '' }}>
	</script>
	<script src="../config.js"></script>
	<script src="/static/layui/layui.js"></script>
		<script src="/static/ui/ui.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;

			let MODULE_PATH = "./";

			let typeCode;
			let objname;

			let cols = [
				[{
						title: 'ID',
						field: 'id',
					},
					{
						title: '字典名称',
						field: 'name',
						align: 'center',
						width: 120
					},
					{
						title: '值',
						field: 'key',
						align: 'center'
					},
					{
						title: '字典状态',
						field: 'enable',
						align: 'center',
						templet: '#dict-type-enable'
					},
					{
						title: '操作',
						toolbar: '#dict-type-bar',
						align: 'center',
						width: 180
					}
				]
			];

			let dataCols = [
				[{
						title: 'ID',
						field: 'id',
					},
					{
						title: '标签',
						field: 'name',
						align: 'center',
						width: 120
					},
					{
						title: '对应值',
						field: 'key',
						align: 'center'
					},
					{
						title: '状态',
						field: 'enable',
						align: 'center',
						templet: '#dict-data-enable'
					},
					{
						title: '操作',
						toolbar: '#dict-data-bar',
						align: 'center',
						width: 180
					}
				]
			];

			table.render({
				elem: '#dict-type-table',
				url: apiUrl + 'stock_dict/list?pid=0',
				headers : getHeader(),
				parseData: function(res) {
					//console.log(res)
					return {
						"code": res.code, //解析接口状态
						"msg": res.message, //解析提示文本
						"count": res.data.count, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				page: true,
				cols: cols,
				skin: 'line',
				height: 'full-148',
				toolbar: '#dict-type-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});
			
			window.renderData = function(pid) {

				typeCode = pid;
				$(".empty").hide();

				table.render({
					elem: '#dict-data-table',
					//url: "../../libs/data/dictData.json",
					url: apiUrl + 'stock_dict/list?pid=' + pid,
					headers : getHeader(),
					parseData: function(res) {
						//console.log(res)
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.data.count, //解析数据长度
							"data": res.data.list //解析数据列表
						};
					},
					page: true,
					height: 'full-148',
					cols: dataCols,
					skin: 'line',
					toolbar: '#dict-data-toolbar'
				});
				$('#objname').text(objname)
			}

			table.on('tool(dict-type-table)', function(obj) {
				if (obj.event === 'remove') {
					window.removeType(obj);
				} else if (obj.event === 'edit') {
					window.editType(obj);
				} else if (obj.event === 'details') {
					objname = obj.data.name;
					
					
					window.renderData(obj.data['id'])
				}
			});

			table.on('toolbar(dict-type-table)', function(obj) {
				if (obj.event === 'add') {
					window.addType();
				} else if (obj.event === 'refresh') {
					window.refreshType();
				} else if (obj.event === 'batchRemove') {
					layer.msg("批量删除")
				}
			});

			form.on('submit(dict-type-query)', function(data) {
				table.reload('dict-type-table', {
					where: data.field
				})
				return false;
			});

			form.on('switch(dict-type-enable)', function(obj) {
				
				let update = {
				    id: obj.value
				}
				_post(layui, 'stock_dict/enable', update, res => {
				    //console.log(res)
				    layer.msg('更新成功', {
				            icon: 1,
				            time: 1000
				        });
				}, err => {
				    console.log(err)
				
				})
			});

			window.addType = function() {
				layer.open({
					type: 2,
					title: '新增',
					shade: 0.1,
					area: ['500px', '400px'],
					content: MODULE_PATH + 'edit.html'
				});
			}

			window.editType = function(obj) {
				layer.open({
					type: 2,
					title: '修改',
					shade: 0.1,
					area: ['500px', '400px'],
					content: MODULE_PATH + 'edit.html?id=' + obj.data.id
				});
			}

			window.removeType = function(obj) {
				//layer.msg("删除");
				layer.confirm('确定要删除', {icon: 3, title:'提示'}, function(index){
				    layer.close(index);
				    _post(layui, 'stock_dict/del',{id : obj.data.id}, res => {
						layer.msg('删除成功',{icon:1,time:1000},() => {
							obj.del();
						});
					}, err => {
						//layer.msg('删除失败',{icon:2,time:1000});
					})
				});
			}

			window.refreshType = function() {
				table.reload('dict-type-table');
			}

			window.addData = function(obj) {
				layer.open({
					type: 2,
					title: '新增' + objname,
					shade: 0.1,
					area: ['500px', '450px'],
					content: MODULE_PATH + 'edit.html?pid=' + typeCode
				});
			}

			window.editData = function(obj) {
				layer.open({
					type: 2,
					title: '修改' + objname,
					shade: 0.1,
					area: ['500px', '450px'],
					content: MODULE_PATH + 'edit.html?pid=' + typeCode + '&id=' + obj.data.id
				});
			}

			window.removeData = function(obj) {
				layer.confirm('确定要删除', {icon: 3, title:'提示'}, function(index){
				    layer.close(index);
				    _post(layui, 'stock_dict/del',{id : obj.data.id}, res => {
						layer.msg('删除成功',{icon:1,time:1000},() => {
							obj.del();
						});
					}, err => {
						//layer.msg('删除失败',{icon:2,time:1000});
					})
				});
			}

			table.on('tool(dict-data-table)', function(obj) {
				if (obj.event === 'remove') {
					window.removeData(obj);
				} else if (obj.event === 'edit') {
					window.editData(obj);
				} else if (obj.event === 'details') {
					window.details(obj);
				}
			});

			table.on('toolbar(dict-data-table)', function(obj) {
				if (obj.event === 'add') {
					window.addData(obj);
				} else if (obj.event === 'refresh') {
					window.refreshData(obj);
				} else if (obj.event === 'batchRemove') {
					layer.msg("批量删除")
				}
			});

			form.on('submit(dict-data-query)', function(data) {
				data.field.typeCode = typeCode;
				table.reload('dict-data-table', {
					where: data.field
				})
				return false;
			});

			form.on('switch(dict-data-enable)', function(obj) {
				console.log(obj)
				let update = {
				    id: obj.value
				}
				_post(layui, 'stock_dict/enable', update, res => {
				    //console.log(res)
				    layer.msg('更新成功', {
				            icon: 1,
				            time: 1000
				        });
				}, err => {
				    console.log(err)
				
				})
			});

			window.refreshData = function() {
				table.reload('dict-data-table');
			}
		})
	</script>
</html>
